<template>
  <div>
    <el-button type="danger">搜索</el-button>
    <el-button type="danger">添加</el-button>
    <el-button type="danger">删除</el-button>
    <el-button type="danger">启用</el-button>
    <el-button type="danger">禁用</el-button>
  </div>
  <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%">
    <el-table-column type="selection" width="55" />

    <el-table-column property="id" label="编码"  />
    <el-table-column property="name" label="角色昵称"/>
    <el-table-column label="授权">
      <template #default="scope">
        <el-button type="text">访问授权</el-button>
        <el-button type="text">成员授权</el-button>
      </template>
    </el-table-column>
    <el-table-column property="description" label="角色描边"/>


    <el-table-column label="状态">
      <template #default="scope">
        <el-switch v-model="value2" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button>编辑</el-button>
        <el-button>授权</el-button>
        <el-button>删除</el-button>
      </template>
    </el-table-column>

  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableInstance } from 'element-plus'
const value2 = ref(true)
interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])


const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData = [
  {
    id: 32,
    name: '总后台管理员',
    description: '主要编辑文章的管理员'
  },
  {
    id: 39,
    name: 'A区',
    description: '二级代理'
  },
  {
    id: 40,
    name: '运行部门',
    description: '3123123'
  },
]
</script>


<style lang='less' scoped></style>